<template>
      <!-- 抽屉 -->
      <el-drawer 
       v-model="isOpenDrawer"
       direction="rtl"
       :before-close="handleClose"
       :show-close="false"
        size="37%"
     >
      <template #header>
        <h4 style="height:40px;">
          <img src="../../assets/images/error.png" style="width: 40px;height:40px;"/>
        </h4>
        <el-button type="danger" @click="closeInfo">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
         {{ $t("message.close") }}
      </el-button>
      </template>
      <template #default>
          <el-table
             border
            :data="errList"
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%;"
            :header-cell-style="header_set"
            :cell-style="header_set"
          >
            <el-table-column type="index" label="#" width="80px"></el-table-column>
            <el-table-column prop="date" :label="$t('message.datetime')" sortable width="150px"></el-table-column>
            <el-table-column prop="info" :label="$t('message.record')"></el-table-column>
          </el-table>
          <el-pagination
              style="margin-top: 10px;display: flex; justify-content: center;"
              size="10"
              layout="prev, pager, next, jumper"
              :total="indexDbNum"
              @current-change="handleCurrentChange"
      />
      </template>
    </el-drawer>
</template>

<script setup lang="ts">
    import { ref,getCurrentInstance,watch } from 'vue'
    import { storeToRefs } from 'pinia';
    import {adminStore} from '../../store/admin'
    import {userStore} from '../../store/user'
    let admin_store = adminStore()
    let store = userStore()
    let {isOpenDrawer} = storeToRefs(admin_store)
    let {indexDbNum,errList} = storeToRefs(store)
    let {proxy} = getCurrentInstance()
    import indexDb from '../../local/indexDb'
    import { ElMessageBox } from 'element-plus'
    import { onMounted } from 'vue';
    let page = ref<number>(1)
    watch(isOpenDrawer,async (newVal,oldVal) => {
        if (newVal) {
            indexDbNum.value = await indexDb.countNum("list")
            renderErrorList()
        }
    })
    // 关闭报警列表
    const handleClose = async () => {
        let res:string = await ElMessageBox.confirm(
          "信息会清空噢！！",
           "是否退出？",
           {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
           }
        )
        if (res === "confirm") {
            isOpenDrawer.value = false
            indexDbNum.value = 0
            await indexDb.deleteData("list")
        }
        return
    }
    const handleCurrentChange = async (currentPage: number) => {
      page.value = currentPage
      renderErrorList()
    }
    // 设置报警表格的样式
    const header_set = () => {
      return {
          'text-align': 'center'
      }
  }
  const renderErrorList = async () => {
       // @ts-ignore
       let result = await indexDb.getAllData("list") as any
        errList.value = result.slice((page.value-1)*10,page.value*10)
    }
    onMounted(async () => {
        //@ts-ignore
        indexDbNum.value = await indexDb.countNum("list")
    })
    const closeInfo = async () => {
      isOpenDrawer.value = false
      indexDbNum.value = 0
      await indexDb.deleteData("list")
    }
</script>

<style scoped lang="less">

</style>